//cSpell: words shixun ceyan Pushable signup codepen

import React from 'react'
import { Sidebar, Segment, Button, Menu } from 'semantic-ui-react'
import MenuItems from './MenuItems'
import 'semantic-ui-css/semantic.min.css'
import './style.css'

class SideMenu extends React.Component {

    render () {
        return (
            <Sidebar.Pushable as={Segment} className='side-bar'>
                <Sidebar id="side-menu" as={Menu} animation='push' width="thin" visible={this.props.visible} icon='labeled' vertical inverted>
                    <Button className='back-item' onClick={this.props.backItemClick}>
                        <i className="angle left icon"></i>
                        返回课程介绍
                    </Button>
                    <MenuItems menus={this.props.menus} activeItem={this.props.activeItem} menuItemClick={this.props.menuItemClick}/>
                </Sidebar>
                <Sidebar.Pusher>
                    <Segment basic >
                        {this.props.children}
                    </Segment>
                </Sidebar.Pusher>
            </Sidebar.Pushable>
        )
    }
}

export default SideMenu
